<template>
	<view class="h-100 mb-9">
		<!-- 轮播组件 -->
		<u-swiper interval="3000" :list="list6" @change="e => currentNum = e.current" :autoplay="true" duration="1000" circular indicatorStyle="right: 20px"
			height="320" @click="handleImgTap(currentNum)" :current="currentIndex">
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
			</view>
		</u-swiper>
		<!-- 点击轮播出现的遮罩层 -->
		<u-overlay :show="show" @click="closeModal" class="d-flex a-center j-center" opacity="1">
			<view @click="show=false">
				<u-swiper :list="list6" @change="e => currentNum2 = e.current" :autoplay="false"
					indicatorStyle="right: 50%;bottom:10upx;transform:translate(50%);" height="420"
					@click="handleImgTap(currentNum2)" :current="currentIndex">
					<view slot="indicator" class="indicator-num">
						<text class="indicator-num__text">{{ currentNum2 + 1 }}/{{ list6.length }}</text>
					</view>
				</u-swiper>
			</view>
		</u-overlay>
		<!-- 商品信息 -->
		<view class="px-2">
			<view class="bg-white bd-radius10 mt-2 pad-20">
				<!-- 价格 -->
				<view class="">
					<text class="font-50 fc-3">￥69</text>
				</view>
				<!-- 淘金币 -->
				<view class="d-flex j-sb fc-3 a-center font-30 mb-2">
					<text class="bg-2 pad-10 bd-radius10">淘金币可抵2.07元</text>
					<text>查看 ></text>
				</view>
				<!-- 品牌信息 -->
				<view class="d-flex a-center j-sb fc-black2 mb-3">
					<view class="">
						<text class="bg-logo pad-10 px-2 bd-radius20 fc ">iFashion</text>
						<text class="ml-2">追流行趋势 买风格新品</text>
					</view>
					<view class="">
						月销
						<text class="ml-2">300+</text>
					</view>
				</view>
				<!-- 产品名称 -->
				<view class="font-35 fc-black fw-bold lh-1">
					黑色吊带连衣裙小众设计感外穿质感高级感女装冷淡风长裙两件套女
				</view>
				<!-- 推荐 帮我选 分享 -->
				<view class="d-flex a-center j-sb px-4 font-30 fc-black2 mt-2">
					<view class="">
						<text class="iconfont icon-aixin mr-1"></text>
						<text class="font-30">推荐</text>
					</view>
					<view class="">
						<text class="iconfont icon-bangwotiaoxian mr-1"></text>
						<text>帮我选</text>
					</view>
					<view class="">
						<text class="iconfont icon-fenxiang mr-1"></text>
						<text>分享</text>
					</view>
				</view>
			</view>
			<!-- 颜色尺码 -->
			<view class="bg-white pad-20 mt-2 bd-radius15">
				<!-- 选择 -->
				<view class="fc-black2 font-30  d-flex j-sb mb-2">
					<text class="mr-3 fw-bold">选择</text>
					<view class="flex-1 " @click="handleColorsModal">
						<view class="d-flex j-sb " >
							<text class="fc-black fw-bold">颜色/尺码</text>
							<u-icon name="arrow-right" size="13"></u-icon>
						</view>
						<view class="mt-1 d-flex a-center">
							<image class="imgIcon mr-2"
								src="https://img.alicdn.com/bao/uploaded/i3/3897715281/O1CN01iNaSKp1oskLaP2wQh_!!0-item_pic.jpg_200x200q90.jpg_.webp"
								mode="widthFix"></image>
							<image class="imgIcon mr-2"
								src="https://img.alicdn.com/bao/uploaded/i3/3897715281/O1CN01iNaSKp1oskLaP2wQh_!!0-item_pic.jpg_200x200q90.jpg_.webp"
								mode="widthFix"></image>
							<text class="bg-2 pad-10 px-2">共2中颜色可选</text>
						</view>
					</view>
				</view>
				<!-- 发货 -->
				<view class=" font-30  d-flex j-sb mb-2">
					<text class="mr-3 fw-bold fc-black2">发货</text>
					<view class="fc-black fw-bold flex-1">
						<view class="">
							<text class="mr-2">浙江杭州</text>
							<text>快递:免运费</text>
						</view>
						<view class="">
							<text>付款后15天内发货</text>
						</view>
					</view>
				</view>
				<!-- 保障 -->
				<view class=" font-30  d-flex j-sb mb-2">
					<text class="mr-3 fw-bold fc-black2">保障</text>
					<view class="fc-black fw-bold flex-1">
						<view class="d-flex j-sb">
							付款后15天内发货 · 15天退货 · 公益活动
							<u-icon name="arrow-right" size="13"></u-icon>
						</view>
					</view>
				</view>
				<!-- 参数 -->
				<view class=" font-30  d-flex j-sb">
					<text class="mr-3 fw-bold fc-black2">参数</text>
					<view class="fc-black fw-bold flex-1">
						<view class="d-flex j-sb">
							男装品牌 尺码...
							<u-icon name="arrow-right" size="13"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="h-">
			<!-- 颜色尺码Modal -->
			<u-popup :show="colorsModal" @close="closeColorsModal" @open="open" :closeable="true">
				<view  class="pad-20 border-box" style="padding-bottom: 120upx;">
					<!-- 1 块 -->
					<view class="d-flex a-center">
						<image class="imgIcon2" src="https://img.alicdn.com/imgextra/i2/43371175/O1CN01kVc4x81KYC7a1Lg8M_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" mode="widthFix"></image>
						<view class="ml-1">
							<view class="d-flex a-center fc-3">
								<text class="font-20">￥</text><text class="font-30">29</text>
								<view class="bg-4 fc d-flex a-center bd-radius30 px-2 ml-1">
									<text class="font-20">限时折后￥</text>
									<text class="font-30">25.20</text>
								</view>
							</view>
							<view class="fc-3 font mt">
								<text>3.21 20点秒杀 | 限时4小时</text>
							</view>
						</view>
					</view>
					<!-- 2.块 -->
					<view class="bg-black2 d-flex a-center bd-radius10 j-sb font mt-2 pad-10 border-box fcolor-3">
						<view class="d-flex a-center">
							<u-icon name="chat" color="#a9a9a9" size="15"></u-icon>
							<text class="ml-1 fw-bold">22人评价 “有差评”</text>
						</view>
						<view class="d-flex a-center">
							<text class="mr-1">全部(1000+)</text>
							<u-icon name="arrow-right" color="#a9a9a9" size="13"></u-icon>
						</view>
					</view>
					<!-- 颜色 -->
					<view class="mt-3">
						<view class="mb-2">
							<text class="fw-bold">颜色(8)</text>
						</view>
						<view class="row  border-box j-sb">
							<view class="d-flex a-center mb-3 bg-black2 mr-2 bd-radius20 bd" :class="yanSeIdx==index?'bd-color':''" v-for="(item,index) in colorList" :key="index" @tap="handleYanSeIdx(index)">
								<image class="imgIcon" :src="item.imgUrl" mode="widthFix"></image>
								<text class="font fc-black px-1 d-flex a-center j-center" :class="yanSeIdx==index?'fc-3':''">{{item.color}}</text>
							</view>
						</view>
					</view>
					<!-- 尺码 -->
					<view class="mt-3 mb-3">
						<view class="mb-2">
							<text class="fw-bold">尺码</text>
						</view>
						<view class="row j-sb">
							<view class="d-flex a-center j-center  w-20 mr-3 bg-black2 mb-3 bd" :class="idx==index?'bd-color':''" v-for="(item,index) in sizeList" :key="item.text" @tap="handleIdx(index)">
								<text class="ml-1 font fc-black py-1" :class="idx==index?'fc-3':''">{{item.text}}</text>
							</view>
						</view>
					</view>
					<!-- 购买数量 -->
					<view class="d-flex j-sb">
						<view class="d-flex a-center flex-1">
							<text class="font-25 mr-2">购买数量</text>
							<text class="font fc-black2">(限购5件有货)</text>
						</view>
						<view class="">
							<text class="pad-20 bg-black2 w-20" @tap="handleGoodNum(-1)">-</text>
							<text class="pad-20 bg-black2 ml-1 mr-1">{{goodNum}}</text>
							<text class="pad-20 bg-black2" @tap="handleGoodNum(+1)">+</text>
						</view>
					</view>
					<!-- 底部加入购物车 立即购买 -->
					<view class="p-fixed bottom-1 left-0 d-flex j-sb w-100 h-bar px-2 border-box">
						<text class="bg-3 flex-1 d-flex j-center a-center fc font-30 bd-rad-left2" @tap="addToCart">加入购物车</text>
						<text class="flex-1 d-flex j-center a-center bg-4 fc font-30 bd-rad-right2" @tap="handleBuyNow">立即购买</text>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 底部占位 -->
		<view class="h-bar" v-for="item in 2" :key="item"></view>
		<!-- 底部加入购物车 -->
		<view class="p-fixed left-0 bottom-0 w-100 h-bar bg-white">
			<view class="d-flex w-100 h-bar">
				<view class="d-flex w-40">
					<view class="flex w-50" @tap="handleShouCang">
						收藏
					</view>
					<view class="flex w-50" @tap="goToGoodCarPage">
						购物车
					</view>
				</view>
				<view class="w-60 d-flex uni-bg-red font-30">
					<view class="flex w-50 h-100" @tap="addToCart">加入购物车</view>
					<view class="flex w-50 bg-3">立即购买</view cla>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getGoodList,setGoodListStorage} from '../../utils/tools.js'
	export default {
		data() {
			return {
				goodList:[],
				goodObj:{
					goodImg:'https://img.alicdn.com/imgextra/i2/43371175/O1CN01kVc4x81KYC7a1Lg8M_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
					goodName:'商品的名字',
					goodPrice:120
				},
				goodNum:1,
				yanSeIdx:0,
				idx:0,
				list6: [
					'https://img.alicdn.com/imgextra/i4/32960648/O1CN015KOuVQ1GepNgMs3YK_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
					'https://img.alicdn.com/imgextra/i3/32960648/O1CN01qaPlBB1GepNmXMzpR_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
					'https://img.alicdn.com/imgextra/i4/449120088/O1CN01mH0jnN1CWLZdiRdnx_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
					'https://img.alicdn.com/imgextra/i4/114377327/O1CN018Fq89z23zodg3L7h9_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
					'https://img.alicdn.com/imgextra/i3/54781025/O1CN01pqph5o1JRUhx37ltc_!!0-saturn_solar.jpg_468x468q75.jpg_.webp',
				],
				currentNum: 0,
				currentNum2: 0,
				currentIndex: 0,
				// 遮罩层
				show: false,
				colorsModal: false,
				sizeList:[
					{text:'S'},
					{text:'M'},
					{text:'L'},
					{text:'XL'},
					{text:'2XL'}
				],
				colorList:[
					{color:'白色',imgUrl:'https://img.alicdn.com/imgextra/i2/43371175/O1CN01kVc4x81KYC7a1Lg8M_!!0-saturn_solar.jpg_468x468q75.jpg_.webp'},
					{color:'灰色',imgUrl:'https://img.alicdn.com/imgextra/i2/43371175/O1CN01kVc4x81KYC7a1Lg8M_!!0-saturn_solar.jpg_468x468q75.jpg_.webp'},
					{color:'黑色',imgUrl:'https://img.alicdn.com/imgextra/i2/43371175/O1CN01kVc4x81KYC7a1Lg8M_!!0-saturn_solar.jpg_468x468q75.jpg_.webp'},
					{color:'雾霾蓝',imgUrl:'https://img.alicdn.com/imgextra/i2/43371175/O1CN01kVc4x81KYC7a1Lg8M_!!0-saturn_solar.jpg_468x468q75.jpg_.webp'},
					{color:'白色1',imgUrl:'https://img.alicdn.com/imgextra/i2/43371175/O1CN01kVc4x81KYC7a1Lg8M_!!0-saturn_solar.jpg_468x468q75.jpg_.webp'},
					{color:'灰色1',imgUrl:'https://img.alicdn.com/imgextra/i2/43371175/O1CN01kVc4x81KYC7a1Lg8M_!!0-saturn_solar.jpg_468x468q75.jpg_.webp'},
					{color:'雾霾蓝1',imgUrl:'https://img.alicdn.com/imgextra/i2/43371175/O1CN01kVc4x81KYC7a1Lg8M_!!0-saturn_solar.jpg_468x468q75.jpg_.webp'},
					{color:'黑色1',imgUrl:'https://img.alicdn.com/imgextra/i2/43371175/O1CN01kVc4x81KYC7a1Lg8M_!!0-saturn_solar.jpg_468x468q75.jpg_.webp'},
					{color:'灰色1',imgUrl:'https://img.alicdn.com/imgextra/i2/43371175/O1CN01kVc4x81KYC7a1Lg8M_!!0-saturn_solar.jpg_468x468q75.jpg_.webp'},
				]
			}
		},
		methods: {
			// 点击收藏按钮
			handleShouCang(){
				uni.showToast({
					title:'收藏成功',
					icon:'success',
				})
			},
			// 跳转购物车页面
			goToGoodCarPage(){
				uni.reLaunch({
					url:'/pages/shoppingcart/shoppingcart'
				})
			},
			// 点击商品加减按钮
			handleGoodNum(num){
				this.goodNum +=num
				if(this.goodNum<1){
					this.goodNum=1
					return
				}else if(this.goodNum>5){
					uni.showToast({
						title:'一次限购5件',
						icon:'none'
					})
					this.goodNum=5
					return;
				}
				
			},
			handleYanSeIdx(index){this.yanSeIdx = index},
			// 点击改变边框样式
			handleIdx(index){
				this.idx = index
			},
			// 点击立即购买
			handleBuyNow(){
				uni.navigateTo({
					url:'/pages/payment/payment',
					success:()=> {
						this.colorsModal = false
					}
				})
			},
			// 加入购物车
			addToCart(){
				this.goodObj = {...this.goodObj,checked:true}
				// 从缓存中商品数组
				let goodArr = getGoodList();
				goodArr.push(this.goodObj);
				// 设置回缓存中
				setGoodListStorage(goodArr);
				uni.showToast({
					title:'已加入购物车',
					success: () => {
						
						this.colorsModal = false
					}
				})
			},
			// 点击颜色尺码 弹出遮罩层
			handleColorsModal() {
           this.colorsModal = true
			},
			// 关闭颜色尺码Modal
			closeColorsModal(){
				this.colorsModal = false
			},
			handleImgTap(index) {
				this.show = true
				console.log(index);
				this.currentNum2 = index
				this.currentIndex = index
			},
			getImgUrls() {
				let imgArr = []
				imgArr = this.swiperList.map(item => item.imgurl)
				return imgArr
			},
			// 关闭遮罩层的事件
			closeModal() {
				this.show = false
				this.currentNum = this.currentNum2
				this.currentIndex = this.currentNum2
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
		box-sizing: border-box;
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 70upx;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 26upx;
		}
	}
</style>
